<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<style type="text/css">
			.fig {
				background-color: blue;
				width: 80%;
				margin-left: 10%;
				margin-right: 10%;
			}
		</style>
	</head>
	<body>
		<h1>The QtZZ Dimension Navigation System (ZZNav)</h1>
		<svg class="fig" height="200px">

		<!--ZZNav-->

		<rect fill="green" width="289" height="54" />
		
		<rect fill="green" stroke="red" stroke-width="2" 
			x="82" y="20" width="104" height="10" />
		<line x1="82" y1="20" x2="185" y2="28" stroke="red" 
			stroke-width="2"/>
		
		<rect id="zr" x="185" y="30" width="100" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="zt" x="187" y="44" fill="black">.qtzz.hello</text>


		<rect id="xr" x="185" y="10" width="100" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="xt" x="187" y="24" fill="black">.qtzz.bye</text>

		<rect id="yr" x="10" y="30" width="175" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="yt" x="12" y="44" fill="black">.qtzz.they.say.he.comes</text>

		<!--Cells-->

		<rect id="rs" x="383" y="70" width="70" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="ts" x="385" y="84" fill="black">something</text>
	
		<line x1="417" x2="417" y1="90" y2="100" stroke="black" />

		<rect id="rrt" x="400" y="100" width="35" height="20" fill="tan" 
			stroke="black" stroke-width="4"/>
		<text id="trt" x="402" y="114" fill="black">root</text>
		
		<line y1="110" y2="110" x1="435" x2="445" stroke="black" />
		
		<rect id="rh" x="445" y="100" width="80" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="th" x="447" y="114" fill="black">hello there</text>

		<line x1="417" x2="417" y1="120" y2="130" stroke="black" />
		
		<rect id="re" x="400" y="130" width="35" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="te" x="402" y="144" fill="black">else</text>

		<!--Caption-->

		<rect y="180" height="20" width="100%" fill="white" />
		<text y="192" x="2" fill="black">Figure 1: The ZZNav at rest.</text>
		</svg>

		<svg class="fig" height="400px">

		<!--ZZNav child view-->
		
		<rect fill="green" width="446" height="184" />
		
		<rect fill="green" stroke="red" stroke-width="2" 
			x="80" y="20" width="80" height="10" />
		<line x1="75" y1="20" x2="160" y2="28" stroke="red" 
			stroke-width="2"/>
		
		<rect id="zr" x="160" y="30" width="200" height="20" fill="gray" 
			stroke="black" stroke-width="2"/>
		<text id="zt" x="162" y="44" fill="black">.qtzz.dims.visually-mapped</text>

		<rect id="xr" x="160" y="10" width="145" height="20" fill="gray" 
			stroke="black" stroke-width="2"/>
		<text id="xt" x="162" y="24" fill="black">.qtzz.dims.children</text>

		<rect id="yr" x="10" y="30" width="150" height="20" fill="gray" 
			stroke="black" stroke-width="2"/>
		<text id="yt" x="12" y="44" fill="black">.qtzz.dims.siblings</text>

		<!--Cells-->

		<rect id="rs" x="225" y="70" width="35" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="ts" x="227" y="84" fill="black">work</text>
	
		<line x1="242" x2="242" y1="90" y2="100" stroke="black" />

		<rect id="rrt" x="225" y="100" width="35" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="trt" x="227" y="114" fill="black">qtzz</text>
		
		<line y1="110" y2="110" x1="260" x2="270" stroke="black" />
		
		<rect id="rh" x="270" y="100" width="40" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="th" x="272" y="114" fill="black">they</text>
		
		<line x1="290" x2="290" y1="120" y2="130" stroke="black" />
		
		<rect id="rcomes" x="270" y="130" width="40" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="tcomes" x="272" y="144" fill="black">hello</text>
		
		<line x1="290" x2="290" y1="150" y2="160" stroke="black" />
		
		<rect id="rcomes" x="270" y="160" width="40" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="tcomes" x="272" y="174" fill="black">bye</text>
			
		<line y1="110" y2="110" x1="310" x2="320" stroke="black" />
		
		<rect id="rsay" x="320" y="100" width="30" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="tsay" x="322" y="114" fill="black">say</text>
		
		<line y1="110" y2="110" x1="350" x2="360" stroke="black" />
		
		<rect id="rhe" x="360" y="100" width="30" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="the" x="362" y="114" fill="black">he</text>
		
		<line y1="110" y2="110" x1="390" x2="400" stroke="black" />
		
		<rect id="rcomes" x="400" y="70" width="40" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="tcomes" x="402" y="84" fill="black">Zalgo</text>
		
		<line x1="420" x2="420" y1="90" y2="100" stroke="black" />
		
		<rect id="rcomes" x="400" y="100" width="40" height="20" fill="tan" 
			stroke="black" stroke-width="4"/>
		<text id="tcomes" x="402" y="114" fill="black">comes</text>

		<line x1="242" x2="242" y1="120" y2="130" stroke="black" />
		
		<rect id="re" x="225" y="130" width="35" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="te" x="227" y="144" fill="black">play</text>
		
		<!--Parent view-->
		
		<rect id="rs" x="383" y="220" width="70" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="ts" x="385" y="234" fill="black">something</text>
	
		<line x1="417" x2="417" y1="240" y2="250" stroke="black" />

		<rect id="rrt" x="400" y="250" width="35" height="20" fill="tan" 
			stroke="gray" stroke-width="4"/>
		<text id="trt" x="402" y="264" fill="black">root</text>
		
		<line y1="260" y2="260" x1="435" x2="445" stroke="black" />
		
		<rect id="rh" x="445" y="250" width="80" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="th" x="447" y="264" fill="black">hello there</text>

		<line x1="417" x2="417" y1="270" y2="280" stroke="black" />
		
		<rect id="re" x="400" y="280" width="35" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="te" x="402" y="294" fill="black">else</text>

		<!--Caption-->

		<rect y="380" height="20" width="100%" fill="white" />
		<text y="392" x="2" fill="black">Figure 2: The ZZNav at work on the y dim.</text>
		</svg>
		
		<svg class="fig" height="400px">

		<!--ZZNav child view-->
		
		<rect fill="green" width="446" height="260" />
		
		<rect fill="green" stroke="red" stroke-width="2" 
			x="80" y="20" width="80" height="10" />
		<line x1="75" y1="20" x2="160" y2="28" stroke="red" 
			stroke-width="2"/>
		
		<rect id="zr" x="160" y="30" width="200" height="20" fill="gray" 
			stroke="black" stroke-width="2"/>
		<text id="zt" x="162" y="44" fill="black">.qtzz.dims.visually-mapped</text>

		<rect id="xr" x="160" y="10" width="145" height="20" fill="gray" 
			stroke="black" stroke-width="2"/>
		<text id="xt" x="162" y="24" fill="black">.qtzz.dims.children</text>

		<rect id="yr" x="10" y="30" width="150" height="20" fill="gray" 
			stroke="black" stroke-width="2"/>
		<text id="yt" x="12" y="44" fill="black">.qtzz.dims.dims</text>

		<!--Cells-->

		<rect id="rs" x="225" y="70" width="35" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="ts" x="227" y="84" fill="black">work</text>
	
		<line x1="242" x2="242" y1="90" y2="100" stroke="black" />

		<rect id="rrt" x="225" y="100" width="35" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="trt" x="227" y="114" fill="black">qtzz</text>
		
		<line y1="110" y2="110" x1="260" x2="270" stroke="black" />
		
		<rect id="rh" x="270" y="100" width="40" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="th" x="272" y="114" fill="black">they</text>
		
		<line x1="290" x2="290" y1="120" y2="130" stroke="black" />
		
		<rect id="rcomes" x="270" y="130" width="40" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="tcomes" x="272" y="144" fill="black">hello</text>
		
		<line x1="290" x2="290" y1="150" y2="160" stroke="black" />
		
		<rect id="rcomes" x="270" y="160" width="40" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="tcomes" x="272" y="174" fill="black">bye</text>
			
		<line y1="110" y2="110" x1="310" x2="320" stroke="black" />
		
		<rect id="rsay" x="320" y="100" width="30" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="tsay" x="322" y="114" fill="black">say</text>
		
		<line y1="110" y2="110" x1="350" x2="360" stroke="black" />
		
		<rect id="rhe" x="360" y="100" width="30" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="the" x="362" y="114" fill="black">he</text>
		
		<line y1="110" y2="110" x1="390" x2="400" stroke="black" />

		<!--Rightmost rank-->

		<rect id="rh" x="400" y="20" width="40" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="th" x="402" y="34" fill="black">they</text>
		
		<rect id="rsay" x="400" y="50" width="30" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="tsay" x="402" y="64" fill="black">say</text>
		
		<line x1="290" x2="290" y1="120" y2="130" stroke="black" />

		<rect id="rrt" x="400" y="80" width="35" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="trt" x="402" y="94" fill="black">qtzz</text>
		
		<line y1="110" y2="110" x1="260" x2="270" stroke="black" />
		
		<rect id="re" x="400" y="110" width="35" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="te" x="402" y="124" fill="black">play</text>
		
		<rect id="rcomes" x="400" y="140" width="40" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="tcomes" x="402" y="154" fill="black">hello</text>
		
		<rect id="rhe" x="400" y="170" width="30" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="the" x="402" y="184" fill="black">he</text>
		
		<rect id="rcomes" x="400" y="200" width="40" height="20" fill="tan" 
			stroke="black" stroke-width="4"/>
		<text id="tcomes" x="402" y="214" fill="black">comes</text>
		
		<rect id="rcbye" x="400" y="230" width="40" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="tcbye" x="402" y="244" fill="black">bye</text>

		<!--End of rightmost rank-->

		<line x1="242" x2="242" y1="120" y2="130" stroke="black" />
		
		<rect id="re" x="225" y="130" width="35" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="te" x="227" y="144" fill="black">play</text>
		
		<!--Parent view-->
		
		<rect id="rs" x="453" y="220" width="70" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="ts" x="455" y="234" fill="black">something</text>
	
		<line x1="487" x2="487" y1="240" y2="250" stroke="black" />

		<rect id="rrt" x="470" y="250" width="35" height="20" fill="tan" 
			stroke="gray" stroke-width="4"/>
		<text id="trt" x="472" y="264" fill="black">root</text>
		
		<line y1="260" y2="260" x1="505" x2="515" stroke="black" />
		
		<rect id="rh" x="515" y="250" width="80" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="th" x="517" y="264" fill="black">hello there</text>

		<line x1="487" x2="487" y1="270" y2="280" stroke="black" />
		
		<rect id="re" x="470" y="280" width="35" height="20" fill="tan" 
			stroke="black" stroke-width="2"/>
		<text id="te" x="472" y="294" fill="black">else</text>

		<!--Caption-->

		<rect y="380" height="20" width="100%" fill="white" />
		<text y="392" x="2" fill="black">Figure 3: The same general ZZNav with siblings replaced by all dims.</text>
		</svg>
		<p>
		The means of navigating the ZZDims of the ZZSpace as the number of dimensions grows while still leveraging the primacy of keyboard navigation inherent in ZigZag. The upper left corner of the ZZView into the ZZSpace is what is tentatively called the ZZNav. It is a view onto the dimensions .qtzz.dims.children on the x, .qtzz.dims.siblings on the y, and .qtzz.dims.visually-mapped on the z. The latter is a ring-rank on the currently mapped values for the x, y, and z dimensions. This allows the user to change any of the parent view's dimensions quickly and easily. This view is only activated when switching dimensions, and at rest is the indicator for the current x, y, and z dimensions depicted as above in cells.
		</p>

		<p>
		When the user wants to switch dimensions he selects the dimension he wants to change through a certain key combination ie. Ctrl-[xyz], and a fourth of the current ZZView has a new view superimposed on it. This view is of fixed dimentions, the aforementioned siblings/y and children/x, and the user navigates this view as he would the parent view. New dimensions can be created in this context, as they can be in the parent view by navigating to these dimensions. 
		</p>
	</body>
</html>
